<template>
	<view>
		<swiper-tab-header :tarbars="tarbars" :tabIndex="tabIndex" @tabClickTap="tabClick"></swiper-tab-header>
		<view class="uni-tab-bar">
			<swiper class="swiper-box" :style="{height:swiperHeight+'px'}" :current="tabIndex" @change="tabChange">
				<swiper-item v-for="(items,index) in newList" :key="index">
					<scroll-view scroll-y class="list" @scrolltolower="loadmore(index)">
						<template v-if="items.list.length>0">
							<!--图文列表-->
							<block v-for="(item,index1) in items.list" :key="index1">
								<index-list :item="item" :index="index1"></index-list>
							</block>
							<!--上拉加载-->
							<load-more :loadText="items.loadText"></load-more>
						</template>
						<template v-else>
							<no-thing></no-thing>
						</template>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<script>
	import indexList from '../../components/index/index-list'
	import swiperTabHeader from '../../components/index/swiper-tab-header.vue'
	import loadMore from '../../components/common/load-more.vue'
	import noThing from '../../components/common/no-thing.vue'

	export default {
		data() {
			return {
				swiperHeight: 500,
				tabIndex: 0,
				tarbars: [{
						name: "关注",
						id: "guanzhu"
					}, {
						name: "推荐",
						id: "tuijian"
					}, {
						name: "体育",
						id: "tiyu"
					}, {
						name: "热点",
						id: "redian"
					}, {
						name: "财经",
						id: "caijing"
					},
					{
						name: "娱乐",
						id: "yule"
					}
				],
				newList: [{
						loadText: "上拉加载更多",
						list: [{
							userpic: "../../static/demo/touxiang.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video",
							titlepic: "../../static/demo/wmfj.jpg",
							playnum: "20万",
							long: "2:45",
							infonum: {
								index: 1, //0无操作 1 顶 2踩 
								dingnum: 10,
								cainum: 10
							},
							commentnum: 10,
							sharenum: 10
						}, {
							userpic: "../../static/demo/touxiang.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "video",
							titlepic: "../../static/demo/wmfj.jpg",
							playnum: "20万",
							long: "2:45",
							infonum: {
								index: 0, //0无操作 1 顶 2踩 
								dingnum: 10,
								cainum: 10
							},
							commentnum: 10,
							sharenum: 10
						}, ]
					},
					{
						loadText: "上拉加载更多",
						list: [{
							userpic: "../../static/demo/touxiang.jpg",
							username: "昵称",
							isguanzhu: false,
							title: "我是标题",
							type: "video",
							titlepic: "../../static/demo/wmfj.jpg",
							playnum: "20万",
							long: "2:45",
							infonum: {
								index: 1, //0无操作 1 顶 2踩 
								dingnum: 10,
								cainum: 10
							},
							commentnum: 10,
							sharenum: 10
						}, {
							userpic: "../../static/demo/touxiang.jpg",
							username: "昵称",
							isguanzhu: true,
							title: "我是标题",
							type: "video",
							titlepic: "../../static/demo/wmfj.jpg",
							playnum: "20万",
							long: "2:45",
							infonum: {
								index: 0, //0无操作 1 顶 2踩 
								dingnum: 10,
								cainum: 10
							},
							commentnum: 10,
							sharenum: 10
						}, ]
					},
					{
						loadText: "上拉加载更多",
						list: []
					}, {
						loadText: "上拉加载更多",
						list: []
					}, {
						loadText: "上拉加载更多",
						list: []
					}, {
						loadText: "上拉加载更多",
						list: []
					}
				]
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					const height = res.screenHeight - uni.upx2px(100);
					this.swiperHeight = height;
				}

			})
		},
		//导航栏搜索框点击事件
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: '../search/search'
			})
		},
		//导航栏点击事件
		onNavigationBarButtonTap(e) {
			switch (e.index) {
				case 1:
					//打开发布页面
					uni.navigateTo({
						url:'../add-input/add-input'
					})
					break;
			}
		},
		//注册组件
		components: {
			indexList,
			swiperTabHeader,
			loadMore,
			noThing
		},
		methods: {
			//点击事件
			tabClick(index) {
				this.tabIndex = index
			},
			//滑动事件
			tabChange(e) {
				this.tabIndex = e.detail.current
			},
			//上拉加载
			loadmore(index) {
				if (this.newList[index].loadText != "上拉加载更多") {
					return;
				}
				this.newList[index].loadText = "加载中";
				setTimeout(() => {
					const obj = {
						userpic: "../../static/demo/touxiang.jpg",
						username: "昵称",
						isguanzhu: false,
						title: "我是标题",
						type: "video",
						titlepic: "../../static/demo/wmfj.jpg",
						playnum: "20万",
						long: "2:45",
						infonum: {
							index: 1, //0无操作 1 顶 2踩 
							dingnum: 10,
							cainum: 10
						},
						commentnum: 10,
						sharenum: 10
					}
					this.newList[index].list.push(obj);
					this.newList[index].loadText = "没有更多数据了";
				}, 1000)

			}
		}
	}
</script>

<style lang="scss">

</style>
